// import { uploadArticleImage } from '@/services/api/api-article';
import React, { useEffect } from 'react';
const OSS = require('ali-oss');
const isDev = process.env.NODE_ENV === 'development';

interface GdrmTinyMceProps {
  accountId?: string;
  organizationName?: string;
  defaultContent?: string;
  action: string;
  onInit?: () => void;
  contentStyle?: string | undefined;
  value?: string | undefined;
  onChange?: (value: string) => void;
  onClick?: (value: any) => void;
}

const GdrmTinyMce: React.FC<GdrmTinyMceProps> = ({
  accountId,
  organizationName,
  defaultContent,
  action,
  onInit,
  contentStyle,
  value,
  onChange,
  onClick,
}) => {
  const tinyID = 'tinyID';

  useEffect(() => {
    if (value && tinyMCE.EditorManager.get(tinyID) != undefined) {
      tinyMCE.EditorManager.get(tinyID).setContent(value);
    }
  }, [value]);

  useEffect(() => {
    tinyMCE.init({
      selector: '#' + tinyID,
      language: 'zh_CN',
      placeholder: 'Type here...',
      // //皮肤
      // skin: 'oxide',
      plugins:
        'importcss tpImportword preview importcss searchreplace autosave save directionality code visualblocks visualchars fullscreen image media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons autoresize',
      menubar: 'file edit view insert format tools table',
      toolbar:
        'tpImportword | undo redo | bold italic underline strikethrough | styles fontsize | forecolor backcolor removeformat | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | charmap  fullscreen  preview save print | insertfile image media table',
      //工具栏模式：滑行
      toolbar_mode: 'wrap',
      //工具栏是否带粘性
      toolbar_sticky: false,
      //工具栏粘性偏移
      toolbar_sticky_offset: 108,
      //隐藏底部状态栏
      statusbar: true,
      quickbars_selection_toolbar: 'bold italic | styles | blockquote',
      // quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
      quickbars_insert_toolbar: false,
      //高度
      height: 600,
      //编辑器最小高度
      min_height: 400,
      resize: true,
      //当关闭或跳转URL时，弹出提示框提醒用户仍未保存变更内容。默认开启提示。
      autosave_ask_before_unload: true,
      //自动保存时间间隔
      autosave_interval: '30s',
      //自动保存前缀
      autosave_prefix: '{path}{query}-{id}-',
      //当编辑器初始化时内容区为空时，Tinymce是否应自动还原存储在本地存储中的草稿
      autosave_restore_when_empty: false,
      //设置自动草稿的有效期。当草稿超过有效期则忽略。
      autosave_retention: '2m',
      //自动获取焦点
      auto_focus: true,
      editimage_cors_hosts: ['picsum.photos'],
      image_advtab: true,
      //图片对话框中报送标签开关
      image_uploadtab: true,
      importcss_append: true,
      // resize_img_proportional: true,
      image_caption: true,
      file_picker_callback: (callback, value, meta) => {
        /* Provide file and text for the link dialog */
        if (meta.filetype === 'file') {
          callback('https://wx2.sinaimg.cn/mw690/967b0c96gy1h5qclqba9dj20u0172whd.jpg', {
            text: 'My text',
          });
        }

        /* Provide image and alt text for the image dialog */
        if (meta.filetype === 'image') {
          callback('https://wx2.sinaimg.cn/mw690/967b0c96gy1h5qclqba9dj20u0172whd.jpg', {
            alt: 'My alt text',
          });
        }

        /* Provide alternative source and posted for the media dialog */
        if (meta.filetype === 'media') {
          // callback('movie.mp4', {
          //   source2: 'alt.ogg',
          //   poster: 'https://www.google.com/logos/google.jpg',
          // });
        }
      },
      content_css: 'default',
      content_style:
        '.word-mark-error{color:rgb(255,255,255);text-decoration:none;background-color:rgb(228,60,48);cursor:pointer}.word-mark-error:hover{color:rgb(255,255,255)}.word-mark-error-highlight{color:rgb(255,255,255);font-size:22px;text-decoration:none;background-color:rgb(251,194,29);cursor:pointer}.word-mark-error-highlight:hover{color:rgb(255,255,255)}.word-mark-right{color:rgb(255,255,255);text-decoration:none;background-color:rgb(13,188,121);cursor:pointer}.word-mark-right:hover{color:rgb(255,255,255)}.word-mark-right-highlight{color:rgb(255,255,255);font-size:22px;text-decoration:none;background-color:rgb(41,155,73);cursor:pointer}.word-mark-right-highlight:hover{color:rgb(255,255,255)}.read-write-plain-text-only{-webkit-user-modify:read-write-plaintext-only}.split-row-select-active{background-color:#e6f7ff}',
      setup(editor: any) {
        editor.on('init', (e) => {
          console.log('The Editor has initialized.');
        });
        editor.on('input', (e) => {
          //当用户输入的时候调用的事件函数
          onChange!(tinyMCE.EditorManager.get(tinyID).getContent());

        });
        editor.on('change', (e) => {
          //当用户输入的时候调用的事件函数
          // onChange!(tinyMCE.editors[tinyID].getContent());
          onChange!(tinyMCE.EditorManager.get(tinyID).getContent());
        });
        editor.on('click', (e) => {
          onClick!(e);
        });
      },
      init_instance_callback: (editor) => {
        onInit!();
        if (defaultContent) {
          editor.insertContent(defaultContent);
        }
        tinyMCE.EditorManager.add(editor);
      },
    });

    return () => {
      tinyMCE.EditorManager.get(tinyID).destroy();
    };
  }, []);

  return (
    <div>
      <textarea id={tinyID} />
    </div>
  );
};

export default GdrmTinyMce;
